<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<style>
    .quotationTable {
        width: 100%;
        border: 0;
        border-collapse: collapse;
    }
    .bottom {
        width: 100%;
        border: 0;
        border-collapse: collapse;
    }
    .quotationTable tr:nth-child(even) {
        background-color: white;
    }
    .bottom tr:nth-child(even) {
        background-color: white;
    }
    .quotationTable td {
        border: 1px solid #000000;;
        text-align: center;
        font-size: 13px;
        letter-spacing: 0px;
        line-height: 150%;
    }
    .bottom td {
        border: 1px solid #000000;;
        text-align: center;
        font-size: 16px;
        letter-spacing: 0px;
        line-height: 150%;
    }
    .quotationTable tbody tr td {
        font-size: 13px;
        text-align: center;
        text-verticle: center;
        line-height: 200%;
    }

    .bottom tbody tr td {
        font-size: 14px;
        text-align :center;
        text-verticle:center;
    }
    .quotationTable thead tr td {
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        text-verticle: center;
    }
    .bottom thead tr td {
        font-size: 14px;
        font-weight: bold;
        text-align :center;
        text-verticle:center;
        line-height: 200%;
    }
    .info-table {
        width: 100%;
        border: 0;
        border-collapse: collapse;
    }
    .info-table tr:nth-child(even) {
        background-color: white;
    }
    .info-table td {
        border: 0px;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0px;
        line-height: 180%;
    }
    .info-table tbody tr td {
        font-size: 14px;
    }
    .info-table thead tr td {
        font-size: 14px;
        font-weight: bold;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    .quotationTable input[type="number"] {
        -moz-appearance: textfield;
    }
    .left-part-2 {
        width: 30%;
    }
    .right-part-2 {
        width: 30%;
    }
    .middle-part {
        width: 40%;
    }
    .help p {
        text-indent: 30px;
    }
    .head-table tr:nth-child(even) {
        background-color: white;
    }
    .bottom tr:nth-child(even) {
        background-color: white;
    }
    .info-p-left {
        margin: 0;
    }
    .info-p-right {
        margin: 0;
    }
</style>
<div class="modal fade" id="modal-uploadFile">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">上传文件</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <form id="fileForm-send" class="form-horizontal">
                        <input type="hidden" name="quoteId">
                        <input type="hidden" name="fileId">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="col-sm-4 control-label">文件类型</label>
                                <div class="col-sm-8">
                                    <select type="text" name="fileType" class="form-control">
                                        <option value="" selected="selected">请选择</option>
                                        <option value=1>纸版报价单</option>
                                        <option value=2>其他相关文件</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">文件备注</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="fileComment" placeholder="请输入对文件的说明">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group" style="display: none" id="file">
                                <label class="col-sm-2 control-label">上传文件</label>
                                <input type="file" multiple="multiple" name="file">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="btn-save-file">保存</button>
            </div>
        </div>
    </div>
</div>
<section class="content-header">
    <h1>查看报价单
        <a class="btn btn-info pull-right" style="margin-right: 10px" shiro:hasPermission="quo:await:print"
           th:href="@{'/quoteManage/printQuotation/quoteId/'+ ${quotationMain.quoteId}}" id="btn-print">
            打印预览
        </a>
    </h1>
</section>
<section class="content">
    <form id="queryForm" method="post" class="form-horizontal" role="form" enctype="multipart/form-data">
        <input type="hidden" id="quoteId" name="quoteId" th:value="${quotationMain.quoteId}">
        <input type="hidden" id="quoteTaskId" name="quoteTaskId" th:value="${quotationMain.quoteTaskId}">
        <div class="col-lg-pull-12" >
            <table class="head-table" style="width: 100%;">
                <tbody style="width: 100%">
                <tr style="border-width:0 0 2px 0;border-style: solid; border-color: #000;">
                    <td style="width: 100%;text-align: center" colspan="3">
                        <div style="display: inline-block;margin-top: 5px">
                            <span style="letter-spacing: 13px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                            <span style="display: block;font-size: 13px; letter-spacing: 8px; line-height: 20px">www.zhongwangjx.com</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="font-size: 30px; font-weight:bold; height:50px; letter-spacing: 4px;width: 100%;text-align: center"
                        colspan="3">
                        报&nbsp;&nbsp;价&nbsp;&nbsp;单
                    </td>
                </tr>
            </table>

            <table class="info-table" style="margin:15px 0px 5px 0px">
                <tbody>
                <tr class="info-row">
                    <td colspan="2" style="text-align: left;font-weight: bold;font-size: 14px">
                        买方信息：
                    </td>
                    <td style="text-align: left;font-weight: bold;font-size: 14px">
                        卖方信息：
                    </td>
                </tr>
                <tr class="info-row">
                    <td class="left-part-2">
                        <p class="info-p-left" style="text-align:left;padding: 0"
                           th:text="${'买方名称：'+quotationMain.consumerName}"></p>
                    </td>
                    <td class="middle-part"></td>
                    <td class="right-part-2">
                        <p class="info-p-right" style="padding: 0;text-align: left"
                           th:text="${'卖方名称：'+quotationMain.supplierName}"></p>
                    </td>
                <tr class="info-row">
                    <td class="left-part-2">
                        <p class="info-p-left" style="text-align:left;padding: 0"
                           th:text="${'买方联系人：'+quotationMain.consumerAttn}"></p>
                    </td>
                    <td class="middle-part"></td>
                    <td class="right-part-2">
                        <p class="info-p-right" style="padding: 0;text-align: left"
                           th:text="${'卖方联系人：'+quotationMain.supplierAttn}"></p>
                </tr>
                <tr class="info-row">
                    <td class="left-part-2">
                        <p class="info-p-left" style="text-align:left;padding: 0"
                           th:text="${'买方电话：'+quotationMain.consumerTel}"></p>
                    </td>
                    <td class="middle-part">
                    </td>
                    <td class="right-part-2">
                        <p class="info-p-right" style="padding: 0;text-align: left"
                           th:text="${'卖方电话：'+quotationMain.supplierTel}"></p>
                    </td>
                </tr>
                <tr class="info-row">
                    <td class="left-part-2">
                        <p class="info-p-right" style="text-align:left;padding: 0"
                           th:text="${'买方邮箱：'+quotationMain.consumerEmail}"></p>
                    </td>
                    <td class="middle-part">
                    </td>
                    <td class="right-part-2">

                        <p class="info-p-right" style="padding: 0;text-align: left"
                           th:text="${'卖方邮箱：'+quotationMain.supplierEmail}"></p>
                </tr>
                </tbody>
            </table>
            <table class="quotationTable" style="width: 100%" id="table">
                <thead>
                <tr>
                    <td colspan="13" style="font-size:14px;font-weight: normal;border: 0px;text-align: left">
                        1.价格
                    </td>
                </tr>
                <tr>
                    <td style="width: 4%;BORDER-left: 1.5px solid;">序号</td>
                    <td style="width: 16%;">物料名称</td>
                    <td style="width: 11%;">项目名称</td>
                    <td style="width: 10%;">规格型号</td>
                    <td style="width: 5%;">数量</td>
                    <td style="width: 5%;">单位</td>
                    <td style="width: 6%;">不含税</br>单价</td>
                    <td style="width: 6%;">不含税</br>总价(元)</td>
                    <td style="width: 5%;">税率%</td>
                    <td style="width: 6%;">税额</br>(元)</td>
                    <td style="width: 6%;">含税</br>单价</td>
                    <td style="width: 7%;">含税</br>总金额(元)</td>
                    <td style="width: 13.5%;">备注</td>
                </tr>
                </thead>
                <tbody>
                <tr th:each="QuotationSublistModel : ${qtts}">
                    <td class="td" th:text="${QuotationSublistModelStat.count}"></td>
                    <td class="td" th:text="${QuotationSublistModel.proName}"></td>
                    <td class="td">
                        <div name = proNames th:text="${QuotationSublistModel.proNames}" th:id="'proNames_' + ${QuotationSublistModelStat.count}" >
                        </div>
                    </td>
                    <td class="td" th:text="${QuotationSublistModel.proType}"></td>
                    <td class="td" th:text="${T(com.zhongwang.business.util.BigDecimalUtils).valueFormat(QuotationSublistModel.proQty)}"></td>
                    <td class="td" th:text="${QuotationSublistModel.proUnit}"></td>
                    <td class="td" th:text="${QuotationSublistModel.unitPrice}"></td>
                    <td class="td" th:text="${QuotationSublistModel.totalPrice}"></td>
                    <td class="td" th:text="${T(com.zhongwang.business.util.BigDecimalUtils).valueFormat(QuotationSublistModel.taxRate)}"></td>
                    <td class="td" th:text="${QuotationSublistModel.taxAmount}"></td>
                    <td class="td" th:text="${QuotationSublistModel.unitPriceTaxIncluded}"></td>
                    <td class="td" th:text="${QuotationSublistModel.totalPriceTaxIncluded}"></td>
                    <td class="td" th:text="${QuotationSublistModel.remark}"></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="3" style="text-align:center;font-weight: bold;line-height: 200%">
                        合同总金额（元）
                    </td>
                    <td colspan="3" style="text-align:center;font-weight: bold;line-height: 200%" th:text="${quotationMain.totalAmountIncludedTax}">
                    </td>
                    <td colspan="4" style="text-align:center;font-weight: bold;line-height: 200%">
                        合同总金额大写
                    </td>
                    <td colspan="3" style="text-align:center;font-weight: bold;line-height: 200%" th:text=" ${'人民币'+ quotationMain.totalAmtIncTaxInWords+'（含'+ T(com.zhongwang.business.util.BigDecimalUtils).valueFormat(qtts.get(0).taxRate) +'%增值税）'}">

                    </td>
                </tr>
                <tr style="border:0px;line-height: 22px">
                    <td colspan="13" style="text-align: left;border:0px; font-size: 14px;line-height: 30px">
                        以上价格包含：
                        <img width="16px" height="16px" name="design" style="margi-n-top: 0px;vertical-align: middle" th:src=" ${quotationMain.design == 1 ? '/img/tick4.png': '/img/x.png'}">&thinsp;设计&nbsp;&nbsp;&nbsp;
                        <img width="16px" height="16px" name="material" style="margin-top: 0px;vertical-align: middle"th:src=" ${quotationMain.material == 1 ? '/img/tick4.png': '/img/x.png'}" >&thinsp;材料&nbsp;&nbsp;&nbsp;
                        <img width="16px" height="16px" name="manufature" style="margin-top: 0px;vertical-align: middle" th:src=" ${quotationMain.manufature == 1 ? '/img/tick4.png': '/img/x.png'}" >&thinsp;制造&nbsp;&nbsp;&nbsp;
                        <img width="16px" height="16px" name="packg" style="margin-top: 0px;vertical-align: middle"  th:src=" ${quotationMain.packg == 1 ? '/img/tick4.png': '/img/x.png'}" >&thinsp;包装&nbsp;&nbsp;&nbsp;
                        <img width="16px" height="16px" name="transport" style="margin-top: 0px;vertical-align: middle" th:src=" ${quotationMain.transport == 1 ? '/img/tick4.png': '/img/x.png'}">&thinsp;运输
                        <span th:if="${quotationMain.transMethod != null}" >[[${quotationMain.transMethod}]]
                        </span>
                        <img width="16px" height="16px" name="install" style="margin-top: 0px;vertical-align: middle" th:src=" ${quotationMain.install == 1 ? '/img/tick4.png': '/img/x.png'}">&thinsp;安装&nbsp;&nbsp;&nbsp;
                        <img width="16px" height="16px" name="debug" style="margin-top: 0px;vertical-align: middle" th:src=" ${quotationMain.debug == 1 ? '/img/tick4.png': '/img/x.png'}">&thinsp;调试
                    </td>
                </tr>
                <tr style="border:0px;line-height: 22px">
                    <td colspan="13" style="text-align: left;border:0px; font-size: 14px" th:text="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+${quotationMain.excludeItem}">
                    </td>
                </tr>
                </tfoot>
            </table>
            <table  class="bottom" style="width: 100%; margin: 5px 0px 1px 0px">
                <thead>
                <tr>
                    <td colspan="9" style="font-size:14px;font-weight: normal;border: 0px;text-align: left">
                        2.付款
                    </td>
                </tr>
                <tr>
                    <td style="width: 5%;BORDER-left: 1.5px solid;">序号</td>
                    <td style="width: 13%;">节点</td>
                    <td colspan="2" style="width: 30%;">条件</td>
                    <td style="width: 10%;">比例%</td>
                    <td colspan="2" style="width:15%;">金额</td>
                    <td colspan="2"style="width:22%;">方式</td>
                </tr>
                </thead>
                <tbody>
                <tr th:each="QuotationPayment : ${payItems}">
                    <td class="td" th:text="${QuotationPaymentStat.count}"></td>
                    <td class="td" th:text="${QuotationPayment.payItemName}"></td>
                    <td colspan="2" class="td" th:text="${QuotationPayment.payCondition}"></td>
                    <td class="td" th:text="${QuotationPayment.payPercent}"></td>
                    <td colspan="2" class="td" th:text="${QuotationPayment.payAmount}"></td>
                    <td colspan="2" class="td" th:text="${QuotationPayment.payMethodName}"></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="9"  style="font-size: 14px; border:0px;text-align: left">
                        <p id="quoteBottomDesc" name="quoteBottomDesc" readonly="readonly" th:text="${quotationMain.quoteBottomDesc}"
                           style="height: auto; padding: 0; white-space: pre-wrap; background:none;margin-bottom: 0px; max-width: 100%; min-width: 100%;">
                        </p>
                    </td>
                </tr>
                <tr th:if="${quotationMain.cosType == 2}">
                    <td   colspan="9" style="font-size: 14px;border: 0px;text-align: left">
                        7.审核
                    </td>
                </tr>
                <tr th:if="${quotationMain.cosType == 2}">
                    <td colspan="2" style="font-size: 14px;border: 0px;text-align: left" >
                        制&nbsp;&nbsp;&nbsp;&thinsp;表&nbsp;&nbsp;&nbsp;&thinsp;人：
                    </td>
                    <td style="width: 15%;font-size: 14px;border: 0px;text-align: left">
                    </td>
                    <td style="font-size: 14px;border: 0px;text-align: left">
                        销售科：
                    </td>
                    <td colspan="2"style="font-size: 14px;border: 0px;text-align: left">
                    </td>
                    <td colspan="2"style="font-size: 14px;border: 0px;text-align: left">
                        机械设计院：
                    </td>
                    <td style="font-size: 14px;border: 0px;text-align: left">
                    </td>
                </tr>
                <tr th:if="${quotationMain.cosType == 2}">
                    <td colspan="2"style="font-size: 14px;border: 0px;text-align: left">
                        生产运营部：
                    </td>
                    <td style="width: 15%;font-size: 14px;border: 0px;text-align: left">
                    </td>
                    <td style="font-size: 14px;border: 0px;text-align: left">
                        董事长：
                    </td>
                    <td colspan="2"style="font-size: 14px;border: 0px;text-align: left">
                    </td>
                    <td colspan="2"style="font-size: 14px;border: 0px;text-align: left">
                        集团财务&nbsp;&nbsp;&nbsp;&thinsp;：
                    </td>
                    <td style="font-size: 14px;border: 0px;text-align: left">
                    </td>
                </tr>
                <tr>
                    <td colspan="8" style="font-size: 14px;border: 0px;text-align: left">
                    </td>
                    <td style="font-size: 14px;border: 0px;text-align: left" th:text = "${quotationMain.quoteDate == null ? '报价日期:':'报价日期:'+ #dates.format(quotationMain.quoteDate, 'yyyy-MM-dd')}">
                    </td>
                </tr>
            </table>
            <div class="row" style="margin-top: 15px">
                <div class="box"style="padding:0px 0px 0px 0px">
                    <div class="col-md-12" style="padding: 0;height: 44px;line-height: 44px; margin-top: 10px">
                        <span style=" height: 34px; line-height: 34px; font-weight: bold;font-size: 14px">
                            附件信息
                        </span>
                        <button id="uploadFiles" type="button" class="btn btn-success pull-right"
                                onclick="openUploadFile()" th:if="${session.user.account}  == ${quotationMain.createAccount}">上传文件
                        </button>
                    </div>
                    <table id="bootstrap-table1" style="padding-top: 0;"></table>
                </div>
            </div>
            <!--<div class="row" style="margin-top: 15px">-->
                <!--<div class="box"style="padding:0px 0px 0px 0px">-->
                    <!--<div class="col-md-12" style="padding: 0">-->
                        <!--<p style="margin:0px 0px 1px 0px; font-size: 14px; font-weight: bold; line-height: 25px; margin-top: 10px">审核信息：</p>-->
                    <!--</div>-->
                    <!--<table id="bootstrap-table" style="padding-top: 0;"></table>-->
                <!--</div>-->
            <!--</div>-->
        </div>
    </form>
</section>
<div th:include="include :: footer"></div>

<script th:inline="javascript">
    var table1;
    var table;
    /**
     * 打开上传文件模态框
     */
    function openUploadFile(fileId) {
        var quoteId = $("#quoteId").val();
        $("#fileForm-send input[name ='quoteId']").val(quoteId);

        if (fileId == null || fileId == '') {
            js.modal.open("modal-uploadFile");
            $("#file").show();
        } else {
            $("#file").hide();
            js.post({
                url: ctx + "quoteManage/file/findFileById",
                data: {
                    fileId: fileId
                },
                success: function (result) {
                    $("#fileForm-send").fillData(result);
                    $("#fileForm-send input[name ='fileType']").val(result.fileType);
                    js.modal.open("modal-uploadFile");
                    js.modal.closeLoading();
                }
            })
        }
    }

    /**
     * 删除文件
     * @param fileId
     */
    function delFile(fileId) {
        js.modal.confirm("确认删除此文件吗？", function () {
            js.post({
                url: ctx + "quoteManage/file/del",
                data: {
                    fileId: fileId
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table1);
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            })
        })
    }

    $(function () {
        var obj = [[${quotationMain}]];
        $('#quoteBottomDesc').html(obj.quoteBottomDesc);
        var totalAmtIncTaxInWords = obj.totalAmtIncTaxInWords;
        //将多个项目名换行
        var objectModel = [[${qtts}]];
        debugger
        for(i = 1; i <= objectModel.length; i++){
                if(objectModel[i-1].proNames != null){
                    var proNames = objectModel[i-1].proNames;
                    debugger;
                    var t = proNames.split(',').join('<br>');
                    $("#proNames_"+i).html(t);
                }
        }
        /**
         *加载附件列表
         */
        table1 = js.table.init({
            id: 'bootstrap-table1',
            url: ctx + "quoteManage/createQuotation/fileList",
            showColumns: false,
            showExport: false,
            pagination: false,
            queryData: {quoteId: $("#quoteId").val()},
            onLoadSuccess: function (data) {
                var dataSource = $('#bootstrap-table1').bootstrapTable('getData', true);
            },
            columns: [
                {
                    title: '序号', field: 'id', width: '60',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {title: '文件名称', field: 'fileName', width: '250'},
                {
                    title: '文件类型', field: 'fileType', width: '150',
                    formatter: function (value, row, index) {
                        if (row.fileType == 1) {
                            return '报价单扫描件';
                        } else if (row.fileType == 2) {
                            return '报价其他文件';
                        }
                    }
                },
                {title: '上传日期', field: 'fileUploadDate', width: '150'},
                {title: '上传者', field: 'userName', width: '150'},
                {title: '文件备注', field: 'fileComment', width: '150'},
                {
                    title: '操作', width: '180',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (hasP("quo:await:fileInfoEdit") && [[${session.user.account}]]  == [[${quotationMain.createAccount}]]) {
                            actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="openUploadFile(' + row.fileId + ')"> 编辑</a> ');
                        }
                        if (hasP("quo:await:upload") && [[${session.user.account}]]  == [[${quotationMain.createAccount}]]){
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="delFile(' + row.fileId + ')"> 删除</a> ');
                        }
                        if (hasP("quo:await:download")) {
                            actions.push('<a class="btn btn-info btn-xs" href="' + row.fileUrl + '" target="_blank"> 下载</a>');
                        }
                        return actions.join('');
                    }
                }
            ]
        });

        // table = js.table.init({
        //     id: 'bootstrap-table',
        //     url: ctx + "quoteManage/quoteApprove/appCommentList",
        //     showColumns: false,
        //     showExport: false,
        //     pagination: false,
        //     queryData: {quoteId: $("#quoteId").val()},
        //     onLoadSuccess: function (data) {
        //         var dataSource = $('#bootstrap-table').bootstrapTable('getData', true);
        //     },
        //     columns: [
        //         {
        //             title: '序号', field: 'id', width: '60',
        //             formatter: function (value, row, index, field) {
        //                 return index + 1;
        //             }
        //         },
        //         {title: '审核人', field: 'appName', width: '170'},
        //         {title: '审核日期', field: 'appDate', width: '170'},
        //         {title: '审核状态', field: 'appStatus', width: '170',
        //             formatter: function (value, row, index) {
        //                 if (value === 0) {
        //                     return '<span class="badge ' + ["label-danger"] + '">' + '审核驳回' + '</span> ';
        //                 } else if (value === 2) {
        //                     return '<span class="badge ' + ["label-success"] + '">' + '审核通过' + '</span> ';
        //                 }
        //             }
        //         },
        //         {title: '审核意见', field: 'appRemark'},
        //     ]
        // });

        /**
         * 保存上传文件及信息
         */
        $("#btn-save-file").click(function () {
            var $this = $(this);
            if (!$this.parents(".modal").find("input[name='file']").get(0).files[0] && $("#file").is(":visible")) {
                js.modal.warning("请至少选择一个文件");
                return false;
            }
            js.submit({
                url: ctx + "quoteManage/file/upload",
                data: new FormData($this.parents(".modal").find("form")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.reset("fileForm-send");
                        js.modal.hide("modal-uploadFile");
                        js.table.refresh(table1);
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
        });


        /**
         * 模态框隐藏事件， 重置表单，重置验证
         */
        js.modal.hideEvent("modal-uploadFile", function () {
            js.reset("fileForm-send");
        });
    });
</script>
</body>
</html>

